<script setup>
import {ref,reactive,onUnmounted} from 'vue'
import { User, Menu, Wallet, Loading, Coin, Compass, Setting, Delete } from '@element-plus/icons-vue'
let index=ref('/information')
const handleOpen = (key, keyPath) => {
  index=key
  sessionStorage.setItem('index',index)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

function get_index(){
  index=sessionStorage.getItem('index',index)
}
get_index()
</script>

<template>
  <div>
    <div class="top">
      <div class="left">
        <img src="/public/下载.png" style="width:150px;margin-top: 20px;margin-left: 10px" />
      </div>
      <div class="right">头像</div>
    </div>
    <div class="nav">
      <el-row class="tac">
        <el-col :span="24">
          <el-menu :default-active=" index " class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
            text-color="black" active-text-color="rgb(51, 119, 255)"  router>
            <el-menu-item index="/information">
              <el-icon>
                <User />
              </el-icon>
              <span>个人资料</span>
            </el-menu-item>
            <el-menu-item index="/application">
              <el-icon>
                <Menu />
              </el-icon>
              <span>所有应用</span>
            </el-menu-item>
            <el-menu-item index="/manage">
              <el-icon>
                <Wallet />
              </el-icon>
              <span>学生管理系统</span>
            </el-menu-item>
            <el-menu-item index="/method">
              <el-icon>
                <Loading />
              </el-icon>
              <span>方法管理</span>
            </el-menu-item>
            <el-menu-item index="/date">
              <el-icon>
                <Coin />
              </el-icon>
              <span>数据源</span>
            </el-menu-item>
            <el-menu-item index="/workflow">
              <el-icon>
                <Compass />
              </el-icon>
              <span>工作流</span>
            </el-menu-item>
            <el-menu-item index="/set">
              <el-icon>
                <Setting />
              </el-icon>
              <span>设置</span>
            </el-menu-item>
            <el-menu-item index="/delete">
              <el-icon>
                <Delete />
              </el-icon>
              <span>回收站</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div class="center">
      <RouterView class="center1"/>
    </div>
  </div>
</template>

<style scoped>

.el-menu{
  border: 0 !important;
}
.top {
  width: 100%;
  height: 75px;
  /* background-color: red; */
}

.left {
  width: 15%;
  height: 75px;
  float: left;
  box-shadow: 0px 0px 100px 10px rgb(248,248,248);
}



.right {
  width: 82%;
  height: 75px;
  line-height: 75px;
  text-align: right;
  float: left;
}

.nav {
  width: 15%;
  height: 670px;
  float: left;
}

.center {
  width: 85%;
  height: calc(100vh - 75px);
  float: right;
  background: rgb(248,248,248);
}
.center1{
  width: 95%;
  height: 92%;
  background-color: white;
  border-radius:20px ;
  margin:30px auto;
}
.el-menu {
  text-align: center;
  line-height: 160px;
  height: calc(100vh - 75px);
}
</style>
